<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ include file="/website/common/base.jsp" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>${webname }-意见反馈</title>
    <%@ include file="/website/common/common.jsp" %>
    <link href="${webctx }/css/manage.css" rel="stylesheet" type="text/css"/>
    <link href="${webctx }/css/order.css" rel="stylesheet" type="text/css"/>
    <link href="${webctx }/css/login.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="${ctx}/plugins/plupload2/plupload.full.min.js"></script>
    <script type="text/javascript" src="${ctx}/plugins/oss/upload.js"></script>

</head>

<style>
    .idea-pic .close {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 10;
        width: 15px;
        height: 15px;
        background: #ff6767 url("${webctx}/images/ico-cross-white.png") center no-repeat;
        background-size: 50%;
        border-radius: 100%;
    }

    .idea-pic .pl_upimgdiv {
        width: 70px;
        height: 70px;
    }

    .idea-pic .pl_upimgdiv img {
        width: 70px;
        height: 70px;
    }

    .idea-pic {
        padding: 0;
        margin-top: 10px;
    }

    .idea-inp {
        padding: 20px 0;
        line-height: 40px;
    }

    .tickling-con {
        width: 950px;
        min-height: 670px;
        padding: 0 20px;
        background-color: #fff;
    }

    .tickling-con .title {
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #666;
        font-weight: bold;
    }

    .tickling-con .text-msg {
        padding: 15px 10px;
        font-size: 14px;
        color: #333;
        background-color: #f3f3f3;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .tickling-con .left-tit {
        float: left;
        width: 100px;
        font-size: 15px;
        color: #666;
        font-weight: bold;
    }

    .tickling-con .tick-inner textarea {
        float: left;
        width: 828px;
        height: 218px;
        padding: 10px;
        background: #fff;
        border: 1px solid #eee;
        font-size: 14px;
        color: #999;
        overflow: hidden;
        resize: none;
    }

    .tickling-con .msg-red {
        display: block;
        height: 30px;
        margin-left: 100px;
        font-size: 14px;
        color: #ff6767;
        line-height: 30px;
    }

    .tickling-con .msg-red span {
        display: none;
    }
    .tickling-success{
        display: none;
        text-align: center;
        padding-top: 100px;
        min-height: 570px;
    }
    .tickling-success p{
        line-height: 30px;
    }
    .tickling-success p span{
        color: #ff6767;
    }

    .edit-papers-btn button {
        width: 120px;
        height: 40px;
        font-size: 14px;
        color: #fff;
        margin-left: 100px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

     .ft-hd-nav{
         padding-top: 20px;
     }

</style>

<body>
<%@ include file="/website/common/top-new.jsp" %>

<div class="warp-body">
    <div class="wid990 clearfix">
        <div id="head-min" class="head-min">
            <a class="logo" href="${ctx }/website/index.jsp"><img style="top:0;" src="${webctx }/images/logo.png"/></a>
            <p class="log-in">意见反馈</p>
            <p class="service-phone">客服电话：400-805-5522</p>
        </div>
    </div>
    <div class="tickling-con wid990 clearfix" id="condiv">
        <div class="title">用户体验提升计划</div>
        <div class="text-msg">您网站的服务有意见？操作还不够人性化？找不到想要的药品？有更好的意见和想法？欢迎您随时提出来，我们将不断的优化和改善，为您提供
            更好的服务，感谢您对巨达的支持，谢谢。
        </div>
        <div class="tick-inner">
            <div class="left-tit">*填写内容</div>
            <textarea name="content" maxlength="250" cols="" rows="" class="idea-txt"
                      placeholder="请输入您想反馈的内容，限250字！　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　我们将认真对待每一位用户反馈的意见，涉及到具体的某些页面，请附上您的截图，谢谢！"></textarea>
            <div class="clearfix"></div>
            <p class="msg-red text-n"><span>请填写想要反馈的内容</span></p>
        </div>
        <div class="idea-pic clearfix">
            <div class="left-tit" style=" width:90px; padding-left:10px; line-height: 70px;">上传图片</div>
            <div class="fl" id="btnspan" style="cursor:pointer;">
                <img src="${webctx }/images/addimg.png" width="70" height="70" id="imgbtn"/>
            </div>
        </div>
        <div class="idea-inp clearfix">
            <div class="left-tit">*联系方式</div>
            <input type="text" id="phone" name="phone" value="${phone }">
            <div class="clearfix"></div>
            <p class="msg-red phone-n"><span>请输入正确的11位手机号码</span></p>
        </div>
        <div class="edit-papers-btn" style="margin-top: -17px;">
            <button onclick="tosubmit()">提 交</button>
        </div>
    </div>

    <div class="tickling-success tickling-con wid990 clearfix" id="msgdiv">
        <p>你的反馈已记录，感谢您的支持！</p>
        <p>将在 <span> 3 </span> 秒后自动跳转到　<a href="https://www.judayw.com">www.judayw.com</a></p>
    </div>

</div>

<%@ include file="/website/common/foot-site.jsp" %>
</body>
</html>
<script>
    var uploader;
    $(function () {
        var plparm = {
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: "imgbtn",
            multi_selection: false,
            flash_swf_url: ctx + '/plugins/plupload2/Moxie.swf',
            silverlight_xap_url: ctx + '/plugins/plupload2/Moxie.xap',
            url: '',
            filters: {
                max_file_size: '500kb',
                prevent_duplicates: false, //不允许选取重复文件
                mime_types: [ //只允许上传图片文件
                    {title: "图片文件", extensions: "jpg,png,jpeg,gif"}
                ]
            },
            init: {
                FilesAdded: function (up, files) {
                    if (files.length > 0) pedit_prewn--;
                    for (var i = 0; i < files.length; i++) {
                        pedit_loadfs.push(files[i]);
                        var html =  "<div class='pl_upimgdiv' id='img_" + files[i].id + "'>" +
                                    "<img src='" + ctx + "/images/imgloading.png'/>" +
                                    "<input name='photo' type='hidden'/> " +
                                    "<div class='progressbg'></div>" +
                                    "<div class='progresstxt'></div>" +
                                    "<div class=\"close\" onclick=\"javascript:deleteImg(this)\"></div>" +
                                    "</div>";
                        $("#btnspan").before(html);
                        pedit_loadprew();
                    }

                }, UploadFile: function (up, file) {
                    var f = $('#img_' + file.id);
                    $(".progresstxt", f).show();
                }, UploadProgress: function (up, file) {
                    var f = $('#img_' + file.id);
                    var d = $(".progressbg", f);
                    var w = f.width() * parseInt(file.percent) / 100;
                    d.css("width", w + "px");
                    $(".progresstxt", f).html(file.percent + "%");
                }, FileUploaded: function (up, file, responseObject) {
                    var re = jQuery.parseJSON(responseObject.response);
                    $("input", $('#img_' + file.id)).val(re.fileid);
                }, UploadComplete: function () {
                    tosave();
                }
            }
        }
        $oss.setUpDir("feedback");
        uploader = $oss.initUpload(plparm);
//        setLeftCur("feedback");
        phoneTrim();


    })
//    function setLeftCur(id){
//        $("#"+id).addClass("cur");
//    }
    function deleteImg(obj) {
        $(obj).parents('.pl_upimgdiv').remove();
    }

    var pedit_loadfs = [];
    var pedit_fr;
    var pedit_prewn = 0;
    function previewImages(file, callback) {
        if (!file || !/image\//.test(file.type)) return;
        if (file.type == 'image/gif') {
            var fr = new mOxie.FileReader();
            fr.onload = function () {
                callback(fr.result);
            }
            fr.readAsDataURL(file.getSource());
        } else {
            var preloader = new mOxie.Image();
            preloader.onload = function () {
                preloader.downsize(100, 100);
                var imgsrc = preloader.type == 'image/jpeg' ? preloader.getAsDataURL('image/jpeg', 80) : preloader.getAsDataURL();
                callback && callback(imgsrc);
                preloader.destroy();
                preloader = null;
            };
            preloader.load(file.getSource());
        }
    }
    //生成预览图
    function pedit_loadprew() {
        pedit_prewn++;
        if (pedit_prewn < pedit_loadfs.length) {
            previewImages(pedit_loadfs[pedit_prewn], function (imgsrc) {
                $("img", $("#img_" + pedit_loadfs[pedit_prewn].id)).attr('src', imgsrc);
                if (pedit_fr) {
                    pedit_fr.destroy();
                    pedit_fr = null;
                }
                pedit_loadprew();
            })
        }
    }
    var subing = false;
    function tosubmit() {
        var phoneLayout = '';
        if ($("[name='content']").val() == '') {
            $(".text-n span").show();
            return;
        } else {
            $(".text-n span").hide();
        }
        if ($("[name='phone']").val() == '') {
            $(".phone-n span").show().text("请输入手机号码");
            return;
        } else {
            $(".phone-n span").hide();
        }
        if (!$w.isMobile($("[name='phone']").val())) {
            $(".phone-n span").show().text("请输入正确的11位手机号码");
            return;
        } else {
            $(".phone-n span").hide();
        }
        if (!subing) {
            subing = true;

            if (uploader.files.length > 0) uploader.start();
            else tosave();
        }
    }
    //为手机号码去空格
    function phoneTrim() {
        var phone = $("[name='phone']").val();
        var phoneTo = $.trim(phone);
        $("[name='phone']").val(phoneTo);


    }
    function tosave() {
        var plimgs = [];
        var itr = $(".idea-pic .pl_upimgdiv input");
        for (var i = 0; i < itr.length; i++) {
            plimgs.push(itr.eq(i).attr("value"));
        }

        if (plimgs.length > 5) {
            alert("图片不能超过5张");
            subing = false;
            return;
        }
        $w.httpRequest({
            url: apiroot + "/user/PCFeedback",
            data: {"phone": $("[name='phone']").val(), "content": $("[name='content']").val(), "photoids": plimgs},
            ok: function (ret) {
                $("#condiv").hide();
                $("#msgdiv").show();

                var txt = $(".tickling-success p span").text();

                function count_down() {
                    if (txt > 1){
                        txt--;
                        $(".tickling-success p span").text(txt);
                        console.log(txt);
                    } else {
                        location.href="https://www.judayw.com";
                        clearInterval(t);
                    }
                }
                var t = setInterval(count_down, 1000);
                $(window).scrollTop(80);
            }, all: function () {
                subing = false;
            }
        })
    }
</script>